<template>
  <div id="app" :class="themeClass">
<!--    <div style="position: fixed;top: 0;left: 50%;z-index: 999;">
      <router-link
        to="/DP1"
        custom
      >大屏1</router-link><br>
      <router-link
        to="/DP2"
        custom
      >大屏2</router-link><br>
      <router-link
        to="/DP3"
        custom
      >大屏3</router-link>
    </div>-->
    <router-view />
  </div>
</template>
<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // 例如：import 组件名称 from '组件路径';
  export default {
    name: "App",
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 引入混淆
    mixins: [],
    // 引入组件
    props: [],
    data() {
      // 这里存放数据
      return {};
    },
    // 监听属性 类似于data概念
    computed: {
      themeClass() {
        return `theme-${this.$store.getters.theme}`;
      }
    },
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 创建之前
    beforeCreate() {},
    // 生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前
    beforeUpdate() {},
    // 生命周期 - 更新之后
    updated() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    // 方法集合
    methods: {}
  };
</script>
<style>
  @font-face {
    font-family: 'DIN-Bold';
    src: url('./fonts/DIN-Bold.otf');
  }

  @font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url('./fonts/YouSheBiaoTiHei.ttf');
  }
</style>
